<template>
  <div class='aui-card--fill scroll-box card-box'>
    <div class='pane-shell'>
      <div class="action-bar">
        <!-- <search @sumbit='sumbit'> -->
        <!--  搜索项 -->
        <!-- <template slot='form'> -->
        <el-form :inline='true'
                 @submit.native.prevent
                 :model='dataForm'
                 ref='dataForm'
                 class="search"
                 @keyup.enter.native="search">
          <el-form-item prop='name'>
            <el-input v-model.trim='dataForm.name'
                      class='form-item'
                      clearable
                      placeholder='请输入设备模板名称'></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="search">{{ $t('query') }}</el-button>
          </el-form-item>
        </el-form>
        <!-- </template> -->
        <!--  操作按钮 -->
        <!-- <template slot='btns'> -->
        <div class="operation-btn">
          <el-button type="primary"
                     plain
                     v-if="$hasPermission('tb:deviceTemplate:insertTemplate')"
                     @click="addWin()">新增设备模板</el-button>
        </div>
      </div>
      <!-- </template> -->
      <!-- </search> -->
      <table-template :tableData='tableData'
                      :loading='dataListLoading'
                      :fieldManagement='false'
                      :dataList='dataList'>
        <el-table-column :label="$t('handle')"
                         fixed='right'
                         header-align='center'
                         align='center'
                         width='250'>
          <template slot-scope='scope'>
            <el-button type='text'
                       class='brand'
                       @click="addWin(scope.row,'see')"
                       size='small'>查看</el-button>
            <el-button type='text'
                       class='brand'
                       @click='addWin(scope.row)'
                       v-if="$hasPermission('tb:deviceTemplate:updateTemplate')"
                       size='small'>修改</el-button>
            <el-button type='text'
                       size='small'
                       class='danger'
                       v-if="$hasPermission('tb:deviceTemplate:deleteTemplate')"
                       @click='deleteHandle({id:scope.row.id})'>{{ $t('delete')}}</el-button>
          </template>
        </el-table-column>
      </table-template>
      <el-pagination :current-page='page'
                     :page-sizes='[10,20,50,100]'
                     :total='total'
                     layout='total, sizes, prev, pager, next'
                     @size-change='pageSizeChangeHandle'
                     @current-change='pageCurrentChangeHandle'>
      </el-pagination>
    </div>
    <EquTemplateaddorupdate ref="addOrUpdate"
                            @callBack="getDataList" />
  </div>
</template>
<script>
import { mapState } from 'vuex'
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import tableTemplate from '@/components/table-template'
import Search from '@/components/search/search'
import EquTemplateaddorupdate from './EquTemplate-add-or-update.vue'
export default {
  mixins: [mixinViewModule, minFormValidate],
  name: '',
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/tb/deviceTemplate/pageTemplate', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addOrUpdateURL: '/tb/deviceTemplate/insertTemplate', // 添加或修改接口，API地址
        getDataInfoURL: '', // 数据详情，API地址
        updateStatusURL: '/tb/deviceTemplate/updateTemplate',
        deleteURL: '/tb/deviceTemplate/deleteTemplate', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '' // 导出接口，API地址
      },
      dataForm: {
        name: ''
      },
      dataList: [] }
  },
  components: { tableTemplate, Search, EquTemplateaddorupdate },
  computed: {
    ...mapState({
      typeList: state => state.dict.typeList
    }),
    tableData () {
      return [
        { label: '设备模板ID', width: '80', prop: 'id' },
        { label: '设备模板名称', width: '80', prop: 'name' },
        { label: '备注', width: '80', prop: 'marks' },
        { label: '创建人', width: '80', prop: 'createName' },
        { label: '创建时间', width: '80', prop: 'createDate' }
      ]
    }
  },
  onShow () {
  },
  methods: {
    search () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.getPageInit()
        }
      })
    },
    addWin (_id, _type) {
      //   this.$refs.addOrUpdate.dataForm.id = _id
      if (_id) {
        this.$refs.addOrUpdate.init(_id, _type)
      } else {
        this.$refs.addOrUpdate.init()
      }
    },
    openEquTemplateaddorupdate (_id) {
      this.$refs.addOrUpdate.dataForm.id = _id
      this.$refs.addOrUpdate.init()
    },
    setStatus1 (_id) {
      this.$http.put('/tb/device/deviceStatus', [_id]).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.getPageInit()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.action-bar {
  width: 100%;
  display: flex;
  .form-item {
    width: 200px;
  }
  .search {
    text-align: left;
    .el-button {
      border-radius: 4px !important;
    }
  }
  .operation-btn {
    flex: 1;
    text-align: right;
  }
}
</style>
